<template>
  <AdminLayout active-menu="dashboard">
    <div class="dashboard-content">
      <div class="content-header">
        <h2>系统仪表盘</h2>
        <p>欢迎使用 HousingHub 管理系统</p>
      </div>

            <!-- 统计卡片 -->
            <div class="stats-cards">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon bg-blue">
                      <User />
                    </div>
                    <div class="stat-content">
                      <div class="stat-value">{{ stats.users }}</div>
                      <div class="stat-title">用户总数</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon bg-green">
                      <House />
                    </div>
                    <div class="stat-content">
                      <div class="stat-value">{{ stats.houses }}</div>
                      <div class="stat-title">房源总数</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon bg-orange">
                      <Document />
                    </div>
                    <div class="stat-content">
                      <div class="stat-value">{{ stats.contracts }}</div>
                      <div class="stat-title">合同总数</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stat-card">
                    <div class="stat-icon bg-red">
                      <Money />
                    </div>
                    <div class="stat-content">
                      <div class="stat-value">¥{{ stats.revenue }}</div>
                      <div class="stat-title">总收入</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 图表区域 -->
            <div class="charts-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="chart-card">
                    <h3>用户增长趋势</h3>
                    <div class="chart-container">
                      <div ref="userChart" class="chart-placeholder"></div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="chart-card">
                    <h3>房源分布</h3>
                    <div class="chart-container">
                      <div ref="houseChart" class="chart-placeholder"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 统计概览和最近活动 -->
            <div class="additional-info">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="info-card">
                    <h3>统计概览</h3>
                    <el-descriptions :column="1" border>
                      <el-descriptions-item label="今日新增用户">{{ overview.newUsers }}</el-descriptions-item>
                      <el-descriptions-item label="今日新增房源">{{ overview.newHouses }}</el-descriptions-item>
                      <el-descriptions-item label="今日签约合同">{{ overview.newContracts }}</el-descriptions-item>
                      <el-descriptions-item label="系统运行时间">{{ overview.uptime }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-card">
                    <h3>最近活动</h3>
                    <el-table :data="recentActivities" style="width: 100%">
                      <el-table-column prop="time" label="时间" width="180"></el-table-column>
                      <el-table-column prop="user" label="用户" width="120"></el-table-column>
                      <el-table-column prop="action" label="操作"></el-table-column>
                      <el-table-column prop="ip" label="IP地址" width="150"></el-table-column>
                    </el-table>
                  </div>
                </el-col>
              </el-row>
            </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminLayout from '@/components/layout/AdminLayout.vue'
import { adminLogout } from '@/utils/auth'
import {
  User,
  Document,
  Money,
  House
} from '@element-plus/icons-vue'

const router = useRouter()

// 统计数据
const stats = reactive({
  users: 1280,
  houses: 542,
  contracts: 328,
  revenue: '245,680'
})

// 统计概览
const overview = reactive({
  newUsers: 12,
  newHouses: 8,
  newContracts: 5,
  uptime: '12 天 5 小时 32 分钟'
})

// 最近活动数据
const recentActivities = ref([
  {
    time: '2025-08-04 14:30:22',
    user: '管理员',
    action: '登录系统',
    ip: '192.168.1.100'
  },
  {
    time: '2025-08-04 13:45:10',
    user: '张三',
    action: '发布新房源',
    ip: '203.123.45.67'
  },
  {
    time: '2025-08-04 12:15:45',
    user: '李四',
    action: '签约合同',
    ip: '113.56.78.90'
  },
  {
    time: '2025-08-04 10:30:12',
    user: '王五',
    action: '房源审核通过',
    ip: '192.168.1.101'
  },
  {
    time: '2025-08-04 09:20:33',
    user: '赵六',
    action: '提交中介申请',
    ip: '120.45.67.89'
  }
])

// 图表引用
const userChart = ref(null)
const houseChart = ref(null)

// 初始化图表
const initCharts = () => {
  // 用户增长趋势图（模拟数据）
  if (userChart.value) {
    userChart.value.innerHTML = `
      <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 5px;">
        <div>
          <h4 style="text-align: center; color: #7f8c8d;">用户增长趋势图</h4>
          <div style="display: flex; align-items: flex-end; height: 150px; gap: 10px; padding: 20px;">
            <div style="width: 20px; height: 60px; background: #00c3ff; border-radius: 4px;"></div>
            <div style="width: 20px; height: 90px; background: #00b09b; border-radius: 4px;"></div>
            <div style="width: 20px; height: 120px; background: #ff9a9e; border-radius: 4px;"></div>
            <div style="width: 20px; height: 100px; background: #ff5e62; border-radius: 4px;"></div>
            <div style="width: 20px; height: 140px; background: #96c93d; border-radius: 4px;"></div>
            <div style="width: 20px; height: 110px; background: #fad0c4; border-radius: 4px;"></div>
            <div style="width: 20px; height: 130px; background: #a1c4fd; border-radius: 4px;"></div>
          </div>
          <div style="display: flex; justify-content: space-around; padding: 10px; color: #7f8c8d;">
            <span>周一</span>
            <span>周二</span>
            <span>周三</span>
            <span>周四</span>
            <span>周五</span>
            <span>周六</span>
            <span>周日</span>
          </div>
        </div>
      </div>
    `
  }

  // 房源分布图（模拟数据）
  if (houseChart.value) {
    houseChart.value.innerHTML = `
      <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 5px;">
        <div>
          <h4 style="text-align: center; color: #7f8c8d;">房源分布图</h4>
          <div style="display: flex; justify-content: center; align-items: center; height: 150px;">
            <div style="width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(
              #00c3ff 0% 30%,
              #00b09b 30% 50%,
              #ff9a9e 50% 70%,
              #ff5e62 70% 100%
            ); position: relative;">
              <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: white; border-radius: 50%;"></div>
            </div>
          </div>
          <div style="display: flex; justify-content: center; gap: 20px; margin-top: 15px; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 5px;">
              <div style="width: 12px; height: 12px; background: #00c3ff; border-radius: 2px;"></div>
              <span style="font-size: 12px; color: #7f8c8d;">一居室 (30%)</span>
            </div>
            <div style="display: flex; align-items: center; gap: 5px;">
              <div style="width: 12px; height: 12px; background: #00b09b; border-radius: 2px;"></div>
              <span style="font-size: 12px; color: #7f8c8d;">两居室 (20%)</span>
            </div>
            <div style="display: flex; align-items: center; gap: 5px;">
              <div style="width: 12px; height: 12px; background: #ff9a9e; border-radius: 2px;"></div>
              <span style="font-size: 12px; color: #7f8c8d;">三居室 (20%)</span>
            </div>
            <div style="display: flex; align-items: center; gap: 5px;">
              <div style="width: 12px; height: 12px; background: #ff5e62; border-radius: 2px;"></div>
              <span style="font-size: 12px; color: #7f8c8d;">其他 (30%)</span>
            </div>
          </div>
        </div>
      </div>
    `
  }
}

// 用户命令处理
const handleUserCommand = async (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('查看个人资料')
      break
    case 'settings':
      ElMessage.info('系统设置')
      break
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await adminLogout()
          ElMessage.success('退出登录成功')
          router.push('/admin-login')
        } catch (error) {
          console.error('管理员登出失败:', error)
          // 即使登出API失败，也要清除本地状态并跳转
          ElMessage.success('退出登录成功')
          router.push('/admin-login')
        }
      })
      break
  }
}

// 页面加载时的处理
onMounted(() => {
  // 初始化图表
  initCharts()
})
</script>

<style scoped>
.dashboard-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.dashboard-content::-webkit-scrollbar {
  width: 8px;
}

.dashboard-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.dashboard-content::-webkit-scrollbar-thumb {
  background: rgba(0, 195, 255, 0.6);
  border-radius: 4px;
}

.dashboard-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 195, 255, 0.8);
}
.content-header {
  text-align: center;
  margin-bottom: 30px;
}

.content-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
}

.content-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

/* 统计卡片 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* 以房子为结构的炫酷动态背景 */
.house-structure-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 主体建筑结构 */
.main-building {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 400px;
}

.building-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 350px;
  background: linear-gradient(180deg, #1a2a6c, #2a4b8d, #3a6cb0);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

/* 窗户网格 */
.window-grid {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 300px;
}

.window-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.window {
  width: 20px;
  height: 30px;
  background: rgba(0, 195, 255, 0.3);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  animation: windowGlow 3s infinite alternate;
}

.window:nth-child(odd) {
  animation-delay: 0.5s;
}

.window:nth-child(even) {
  animation-delay: 1s;
}

@keyframes windowGlow {
  0% {
    background: rgba(0, 195, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  }
  100% {
    background: rgba(0, 195, 255, 0.7);
    box-shadow: 0 0 20px rgba(0, 195, 255, 0.9);
  }
}

/* 建筑顶部装饰 */
.building-top {
  position: absolute;
  bottom: 350px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 30px;
  background: linear-gradient(90deg, #00c3ff, #ffff1c);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -5px 15px rgba(0, 195, 255, 0.7);
}

/* 建筑底部基座 */
.building-base {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 40px;
  background: linear-gradient(90deg, #1a2a6c, #2a4b8d);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* 周围建筑 */
.surrounding-building {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 300px;
  background: linear-gradient(180deg, #2a4b8d, #1a2a6c);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4);
}

.building-left {
  left: 20%;
}

.building-right {
  right: 20%;
}

/* 科技光环 */
.tech-halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.2) 0%, transparent 70%);
  animation: rotateHalo 20s infinite linear;
}

.halo-1 {
  top: 20%;
  left: 10%;
  width: 300px;
  height: 300px;
  animation-duration: 25s;
}

.halo-2 {
  top: 40%;
  right: 15%;
  width: 200px;
  height: 200px;
  animation-duration: 30s;
  animation-direction: reverse;
}

.halo-3 {
  bottom: 30%;
  left: 30%;
  width: 150px;
  height: 150px;
  animation-duration: 20s;
}

@keyframes rotateHalo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 数据流 */
.data-stream {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.5), transparent);
  height: 2px;
  animation: dataFlow 5s infinite linear;
}

.stream-1 {
  top: 20%;
  left: -100%;
  width: 200px;
  animation-delay: 0s;
}

.stream-2 {
  top: 40%;
  right: -100%;
  width: 300px;
  animation-delay: 1s;
  animation-duration: 6s;
}

.stream-3 {
  top: 60%;
  left: -100%;
  width: 250px;
  animation-delay: 2s;
  animation-duration: 7s;
}

.stream-4 {
  top: 80%;
  right: -100%;
  width: 150px;
  animation-delay: 3s;
  animation-duration: 4s;
}

@keyframes dataFlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100vw + 200px));
  }
}

/* 科技粒子 */
.tech-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00c3ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #00c3ff;
  animation: floatParticle 10s infinite linear;
}

.particle-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}

.particle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 1s;
}

.particle-3 {
  top: 50%;
  left: 10%;
  animation-delay: 2s;
}

.particle-4 {
  top: 70%;
  right: 30%;
  animation-delay: 3s;
}

.particle-5 {
  top: 20%;
  left: 40%;
  animation-delay: 4s;
}

.particle-6 {
  top: 40%;
  right: 10%;
  animation-delay: 5s;
}

.particle-7 {
  top: 60%;
  left: 30%;
  animation-delay: 6s;
}

.particle-8 {
  top: 80%;
  right: 40%;
  animation-delay: 7s;
}

.particle-9 {
  top: 15%;
  left: 60%;
  animation-delay: 8s;
}

.particle-10 {
  top: 75%;
  right: 25%;
  animation-delay: 9s;
}

@keyframes floatParticle {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(50px, 30px);
  }
  50% {
    transform: translate(100px, 0);
  }
  75% {
    transform: translate(50px, -30px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 电路节点 */
.circuit-node {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00c3ff;
  border-radius: 50%;
  box-shadow: 0 0 15px #00c3ff;
  animation: pulseNode 2s infinite;
}

.node-1 {
  top: 25%;
  left: 25%;
  animation-delay: 0s;
}

.node-2 {
  top: 35%;
  right: 25%;
  animation-delay: 0.5s;
}

.node-3 {
  top: 45%;
  left: 35%;
  animation-delay: 1s;
}

.node-4 {
  bottom: 35%;
  right: 35%;
  animation-delay: 1.5s;
}

.node-5 {
  bottom: 25%;
  left: 45%;
  animation-delay: 2s;
}

@keyframes pulseNode {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
}

/* 光效 */
.light-beam {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.3), transparent);
  height: 100px;
  width: 10px;
  transform-origin: top center;
  animation: rotateBeam 15s infinite linear;
}

.beam-1 {
  top: 0;
  left: 30%;
  animation-delay: 0s;
}

.beam-2 {
  top: 0;
  left: 50%;
  animation-delay: 5s;
  animation-duration: 20s;
}

.beam-3 {
  top: 0;
  left: 70%;
  animation-delay: 10s;
  animation-duration: 25s;
}

@keyframes rotateBeam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 扫描线 */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.8), transparent);
  animation: scan 5s infinite linear;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

/* 浮动装饰元素 */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.1);
  animation: float 15s infinite linear;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -100px;
  animation-duration: 20s;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.2) 0%, transparent 70%);
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -80px;
  right: -80px;
  animation-duration: 25s;
  animation-direction: reverse;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.2) 0%, transparent 70%);
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-duration: 15s;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.2) 0%, transparent 70%);
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, 20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 40px) rotate(180deg);
  }
  75% {
    transform: translate(-20px, 20px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

.admin-dashboard-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.app-title {
  color: #00c3ff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: white;
}

.username {
  font-size: 16px;
  font-weight: 500;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  padding: 20px;
}

.content-header {
  margin-bottom: 30px;
}

.content-header h2 {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.content-header p {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.stat-icon.bg-blue {
  background: linear-gradient(135deg, #00c3ff, #0066cc);
}

.stat-icon.bg-green {
  background: linear-gradient(135deg, #00b09b, #96c93d);
}

.stat-icon.bg-orange {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

.stat-icon.bg-red {
  background: linear-gradient(135deg, #ff5e62, #ff9966);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 14px;
  color: #7f8c8d;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chart-card h3 {
  margin-top: 0;
  color: #2c3e50;
}

.chart-container {
  height: 300px;
}

/* 统计概览和最近活动 */
.additional-info {
  margin-bottom: 30px;
}

.info-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.info-card h3 {
  color: #2c3e50;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

@media (max-width: 992px) {
  .stats-cards .el-col {
    margin-bottom: 20px;
  }

  .charts-section .el-col {
    margin-bottom: 20px;
  }

  .additional-info .el-col {
    margin-bottom: 20px;
  }
}
</style>
